<template>
    <div class="wrapper">
        <h1>404 Not Found</h1>
        <h2>你要找的页面不存在</h2>
        <!-- todo when hover, playing music '500 miles' ~ -->
        <router-link :to="'/'" class="take-me-home">带我回家</router-link>
    </div>
</template>

<script>
    export default {
        name: 'page404'
    };
</script>

<style scoped>

    .wrapper {
        background-color: #f9f9f9;
        height: 100vh;
        text-align: center;
        box-sizing: border-box;
        padding-top: 40%;
    }

    h1, h2, a {
        color: #e1e1e1;
    }

    .take-me-home {
        display: inline-block;
        width: 6em;
        margin-top: 20px;
    }

</style>